<template>
  <section class="my-header">
    <input type="text" name="" placeholder="请输入任务名称" class="layui-input" v-model.trim="keyword" @keyup.enter="addTodo">
    <button type="button" class="layui-btn layui-btn-normal" @click="addTodo"  >添加</button>
  </section>
</template>

<script>
export default {
  name: "my-header",
  data() {
    return {
      keyword: ""
    }
  },
  methods: {
    addTodo() {
      if (this.keyword !== "") {
        const todoObj = { id: Date.now(), name: this.keyword, isChecked: false }
        this.$store.commit("addTodo", todoObj)
        this.keyword = ""
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-header {
  display: flex;
  justify-content: center;
}
</style>